<template>
  <div class="regulatory-page">
    <div class="return" @click="goBack">
      <Icon size="25" color="#000000" name="arrow-left" class="back" />
      <div class="title">
        <p class="text">账户设置</p>
      </div>
    </div>
    <div class="top-container" @click="goToUserProfile">
      <div class="left-section">
        <VanImage
            round
            width="4rem"
            height="4rem"
            :src="require('@/assets/backgrounds/user.jpg')"
        />
        <div class="info">
          <p class="title">{{ username }}</p>
          <Button round size="small" color="#323030" class="membership">
            <p class="membership-text">{{ membershipLevel }}</p>
          </Button>
        </div>
      </div>
      <div class="arrow">
        <router-link to="/SettingView">
          <Icon size="20" color="#808080" name="arrow" />
        </router-link>
      </div>
    </div>
    <div class="common-container" @click="goToAddressManagement">
      <div class="left-section">
        <p>地址管理</p>
      </div>
      <div class="arrow">
        <router-link to="/SettingView">
          <Icon size="15" color="#808080" name="arrow" />
        </router-link>
      </div>
    </div>
    <div class="common-container" @click="goToAccountSecurity">
      <div class="left-section">
        <p>账户与安全</p>
      </div>
      <div class="arrow">
        <router-link to="/SettingView">
          <Icon size="15" color="#808080" name="arrow" />
        </router-link>
      </div>
    </div>
    <div class="final-container" @click="goToAbout">
      <div class="left-section">
        <p>关于爱宠星球</p>
      </div>
      <div class="arrow">
        <p class="version">V1.0.0</p>
        <router-link to="/SettingView">
          <Icon size="15" color="#808080" name="arrow" />
        </router-link>
      </div>
    </div>
    <div style="margin: 16px;">
      <Button round block native-type="submit" @click="logout" style="color: #000000">退 出 登 录</Button>
    </div>
  </div>
</template>

<script>
import { Button, Icon, Image as VanImage } from "vant";
import http from "@/plugins/http";

export default {
  name: "SettingView",
  components: { Button, Icon, VanImage },
  data() {
    return {
      username: "",
      membershipLevel: ""
    };
  },
  methods: {
    fetchUserInfo() {
      const storedUser = JSON.parse(sessionStorage.getItem("username"));
      if (storedUser) {
        http.get(`/user/getUserInfo/${storedUser}`)
            .then(response => {
              console.log(response);
              const user = response.data;
              this.username = user.username;
              this.membershipLevel = user.userType === 1 ? "白金会员" : "普通会员";
            })
            .catch(error => {
              console.error("获取用户信息出错:", error);
            });
      } else {
        console.error("没有用户登录");
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    goToUserProfile() {
      this.$router.push('/UserView');
    },
    goToAddressManagement() {
      this.$router.push('/AddressView');
    },
    goToAccountSecurity() {
      this.$router.push('/SecurityView');
    },
    goToAbout() {
      this.$router.push('/AboutView');
    },
    logout() {
      sessionStorage.clear();
      this.$router.push('/');
    }
  },
  mounted() {
    this.fetchUserInfo();
  }
}
</script>

<style scoped>
.regulatory-page {
  background-color: #F6F7F9;
  height: 100vh;
}

.return {
  background-color: #FAEAEA;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.back {
  position: absolute;
  left: 10px;
  text-decoration: none;
}

.title {
  display: flex;
  align-items: center;
}

.text {
  margin: 0;
  color: #000000;
  font-size: 16px;
}

.top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 15px 15px;
  border-bottom: 0.5px solid #e0e0e0;
  cursor: pointer;
}
.common-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 15px 15px;
  border-bottom: 0.5px solid #e0e0e0;
  cursor: pointer;
}
.final-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 15px 15px;
  border-bottom: 0.5px solid #e0e0e0;
  border-bottom-left-radius: 10px; /* 添加左下角弧度 */
  border-bottom-right-radius: 10px; /* 添加右下角弧度 */
  cursor: pointer;
}
.left-section {
  display: flex;
  align-items: center;
}

.info {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.membership {
  margin-top: 5px;
  height: 25px;
}

.membership-text {
  color: #FFC46C;
}

.arrow {
  display: flex;
  align-items: center;
}
.version {
  font-size: 13px;
  color: #999987;
}
</style>
